/*
 * Copyright 2022 The Kubernetes Authors
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'mixins';
@import '../Tile/mixins';
@import '../Button/mixins';
@import '../Terminal/Maximized';
@import '../../Themes/mixins';

@mixin Guide {
  .kui--guide {
    @content;
  }
}
@mixin GuideRunButton {
  @include Button {
    &.kui--guidebook-run {
      @content;
    }
  }
}

@mixin ChipGroup {
  .kui--chip-group {
    @content;
  }
}
@mixin ChipGroupMain {
  .pf-c-chip-group__main {
    @content;
  }
}
@mixin ChipGroupLabel {
  .pf-c-chip-group__label {
    @content;
  }
}
@mixin Chip {
  .pf-c-chip {
    @content;
  }
}
@mixin ChipOverflow {
  &.pf-m-overflow {
    @content;
  }
}
@mixin ChipLabel {
  .pf-c-chip__text {
    @content;
  }
}

@include InvertedColors {
  @include Chip {
    --pf-c-chip--BackgroundColor: var(--color-base02);
    svg {
      color: var(--color-text-02);
    }
    @include ChipOverflow {
      --pf-c-chip--m-overflow__text--Color: var(--color-brand-03);
    }
  }
  @include ChipLabel {
    --pf-c-chip__text--Color: var(--color-text-01);
  }
}

@include Guide {
  @include ChipGroup {
    padding: 0;
    --pf-c-chip-group--m-category--BackgroundColor: transparent;
  }
  @include ChipGroupLabel {
    margin: 0;
    text-align: right;
  }
}

@include GuideRunButton {
  &:not(:hover) {
    color: var(--color-base00);
    background-color: var(--color-base0F);
  }
}

@include Guide {
  @include Tile {
    width: 100%;
    height: 100%;
    background-color: var(--color-base01);
    --pf-c-tile__body--Color: var(--color-text-01);
    --pf-c-tile__icon--Color: var(--color-text-01);
    --pf-c-tile__title--Color: var(--color-text-01);
  }
}

@include MaximizedSplit {
  @include Block {
    &:first-child {
      height: 100%;
    }
  }
  @include Guide {
    height: 100%;
  }
  @include Wizard {
    height: 100%;
  }
  @include WizardMainContent {
    height: 100%;
    overflow: hidden;
  }
  @include WizardNav {
    padding-left: #{0.5 * $inset};
  }
  @include WizardBody {
    padding: #{1.5 * $inset};
  }
}
